/**
 * Created by xiangjiayu on 2017/7/19.  考评
 */

import React from 'react';
import {Icon,Button,Row,Col,Input,Select,DatePicker,Modal,AutoComplete,Table,Transfer} from 'antd';
import CheckBox from '../../../components/common/CheckBox/CheckBox';//自定义 多选框

function onSelect(value) {
}


export default class Train extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            dataSource: [],
            //弹窗
            Modal_px_Add: false,
            Modal_zy_Add: false,
            Modal_kc_Add: false,
            //穿梭框
            mockData: [],
            targetKeys: [],
        };
    }
    //弹窗
        //新增
    showModal_px_Add(Modal_px_Add) {
        this.setState({ Modal_px_Add });
    }
        //专业
    showModal_zy_Add(Modal_zy_Add) {
      this.setState({ Modal_zy_Add });
    }
        //课程
    showModal_kc_Add(Modal_kc_Add) {
      this.setState({ Modal_kc_Add });
    }
    //自动补全
    handleSearch = (value) => {
      this.setState({
          dataSource: !value ? [] : [
            value,
            value + value,
            value + value + value,
          ],
      });
    }
    componentDidMount() {
      this.getMock();
    }
    getMock = () => {
      const targetKeys = [];
      const mockData = [];
      for (let i = 0; i < 20; i++) {
        const data = {
          key: i.toString(),
          title: `课程${i + 1}`,
          description: `description of content${i + 1}`,
          chosen: Math.random() * 2 > 1,
        };
        if (data.chosen) {
          targetKeys.push(data.key);
        }
        mockData.push(data);
      }
      this.setState({ mockData, targetKeys });
    }
    filterOption = (inputValue, option) => {
      return option.description.indexOf(inputValue) > -1;
    }
    handleChange = (targetKeys) => {
      this.setState({ targetKeys });
    }
    render(){
      const { dataSource } = this.state;
        return(
            <div className="modal-example-cont">
                <Button onClick={() => this.showModal_px_Add(true)}>新增课程</Button>
                <Modal
                  title="新增课程"
                  wrapClassName="vertical-center-modal"
                  visible={this.state.Modal_px_Add}
                  onCancel={() => this.showModal_px_Add(false)}
                >
                    <div className="modal-add-cont">
                        <Row gutter={16}>
                            <Col span={5} className="text-r">
                                <div className="ant-form-item-label">
                                    <label className="ant-form-item-required"><span className="span-left">学员姓名</span></label>
                                </div>
                            </Col>
                            <Col span={10}>
                                <div className="ant-form-item-control has-error">
                                    {/*<Input size="large" placeholder="请输入学员姓名"/>*/}
                                    <AutoComplete
                                      dataSource={dataSource}
                                      onSelect={onSelect}
                                      onSearch={this.handleSearch}
                                      placeholder="请输入课程姓名"
                                    />
                                </div>
                            </Col>
                            <Col span={9}>
                                <div className="error-tip"><Icon type="minus-circle-o" />请输入课程姓名</div>
                            </Col>
                        </Row>
                        <Row gutter={16}>
                          <Col span={5} className="text-r">
                            <div className="ant-form-item-label">
                              <label><span className="span-left">课程类型</span></label>
                            </div>
                          </Col>
                          <Col span={10}>
                            <div className="ant-form-item-control">
                              <Select
                                defaultValue="请选择课程类型"
                                size="large"
                              >
                                <Option value="基础课">基础课</Option>
                                <Option value="生活课">生活课</Option>
                                <Option value="实操课">实操课</Option>
                                <Option value="理论课">理论课</Option>
                              </Select>
                            </div>
                          </Col>
                        </Row>
                        <Row gutter={16}>
                          <Col span={5} className="text-r">
                            <div className="ant-form-item-label">
                              <label><span className="span-left">课程时长(小时)</span></label>
                            </div>
                          </Col>
                          <Col span={10}>
                            <div className="ant-form-item-control">
                              <Input size="large" placeholder="请输入课程时长"/>
                            </div>
                          </Col>
                        </Row>
                      <Row gutter={16}>
                        <Col span={5} className="text-r">
                          <div className="ant-form-item-label">
                            <label><span className="span-left">课程学分(分)</span></label>
                          </div>
                        </Col>
                        <Col span={10}>
                          <div className="ant-form-item-control">
                            <Input size="large" placeholder="请输入课程学分"/>
                          </div>
                        </Col>
                      </Row>
                    </div>
                </Modal>
                <Button onClick={() => this.showModal_zy_Add(true)}>新增专业</Button>
                <Modal
                  title="新增专业"
                  wrapClassName="vertical-center-modal"
                  visible={this.state.Modal_zy_Add}
                  onCancel={() => this.showModal_zy_Add(false)}
                >
                  <div className="modal-add-cont">
                    <Row gutter={16}>
                      <Col span={5} className="text-r">
                        <div className="ant-form-item-label">
                          <label className="ant-form-item-required"><span className="span-left">专业名称</span></label>
                        </div>
                      </Col>
                      <Col span={10}>
                        <div className="ant-form-item-control has-error">
                          <Input size="large" placeholder="请输入专业名称"/>
                        </div>
                      </Col>
                      <Col span={9}>
                        <div className="error-tip"><Icon type="minus-circle-o" />请输入专业名称</div>
                      </Col>
                    </Row>
                    <Row gutter={16}>
                      <Col span={5} className="text-r">
                        <div className="ant-form-item-label">
                          <label><span className="span-left">专业费用(元)</span></label>
                        </div>
                      </Col>
                      <Col span={10}>
                        <div className="ant-form-item-control">
                          <Input size="large" placeholder="请输入专业费用"/>
                        </div>
                      </Col>
                    </Row>
                    <Row gutter={16}>
                      <Col span={5} className="text-r">
                        <div className="ant-form-item-label">
                          <label><span className="span-left">专业介绍</span></label>
                        </div>
                      </Col>
                      <Col span={19}>
                        <div className="ant-form-item-control">
                          <div className="textarea-surplus">
                            <Input type="textarea" rows="10" size="large" placeholder="请输入专业介绍"/>
                            <p>还可以输入200字</p>
                          </div>
                        </div>
                      </Col>
                    </Row>
                  </div>
                </Modal>
                <Button onClick={() => this.showModal_kc_Add(true)}>课程管理</Button>
                <Modal
                  title="课程管理"
                  wrapClassName="vertical-center-modal"
                  visible={this.state.Modal_kc_Add}
                  onCancel={() => this.showModal_kc_Add(false)}
                  width="436"
                >
                  <Transfer
                    dataSource={this.state.mockData}
                    titles={['未选择课程', '已选择课程']}
                    showSearch
                    searchPlaceholder="请输入搜索内容"
                    filterOption={this.filterOption}
                    targetKeys={this.state.targetKeys}
                    onChange={this.handleChange}
                    render={item => item.title}
                  />
                </Modal>
            </div>

        )
    }
}